<template>
    <div class="shopping-cart-wrap">
        <!--购物车-->
        <el-card class="box-card " shadow="hover" >
            <div slot="header" class="clearfix">
                <div class="media-display" style=" display: flex;justify-content: space-between;align-items: baseline">
                    <div>
                        <el-link :underline="false" style="font-size: 20px">订单商品</el-link>
                        <el-divider direction="vertical"></el-divider>
                        <count-down v-if="countDownShow" :createTime="order.createTime"></count-down>
                    </div>
                    <el-button type="primary" @click="toOrder" icon="el-icon-back" circle></el-button>
                </div>
            </div>
            <div class="clearfix">
                <el-table
                        row-class-name="row-class"
                        show-overflow-tooltip="true"
                        :data="orderCartVoList"
                        :fit="true"
                        tooltip-effect="dark">
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            label="图片">
                        <template slot-scope="scope">
                            <img @click="$router.push(`/product/${scope.row.productId}`)"
                                 style="cursor: pointer"
                                 :src="prefix + scope.row.specsImg" width="80" height="80" alt="商品图片">
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="商品名称"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="productSpecs"
                            label="规格"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            {{ scope.row.productSpecs | parseSpecs }}
                        </template>
                    </el-table-column>

                    <el-table-column
                            prop="price"
                            label="单价"
                            class-name="label-center">
                    </el-table-column>
                    <el-table-column
                            prop="total"
                            label="数量"
                            class-name="label-center">
                    </el-table-column>
                    <el-table-column
                            prop="totalPrice"
                            label="小计">
                        <template slot-scope="scope">
                            {{ scope.row.price * scope.row.total }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>

        </el-card>

        <el-card class="box-card " shadow="hover" style="margin: 20px 0">
            <div slot="header" class="clearfix">
                <el-link :underline="false" style="font-size: 20px">用户默认地址</el-link>
            </div>
            <div class="text">
                <el-descriptions title="" :labelStyle="{fontSize:'20px'}" :column="2">
                    <el-descriptions-item label="姓名">
                        <el-link :underline="false" style="font-size: 20px">{{ address.name }}</el-link>
                    </el-descriptions-item>
                    <el-descriptions-item label="手机号">
                        <el-link :underline="false" style="font-size: 20px">{{ address.phone }}</el-link>
                    </el-descriptions-item>
                    <el-descriptions-item label="地址名称">
                        <el-link :underline="false" style="font-size: 20px">{{ address.addressName }}</el-link>
                    </el-descriptions-item>
                    <el-descriptions-item label="地址类型">
                        <el-link :underline="false" style="font-size: 20px">
                            <el-tag size="small">{{ address.tag | tagToValue}}</el-tag>
                        </el-link>
                    </el-descriptions-item>
                    <el-descriptions-item label="地址">
                        <el-link :underline="false" style="font-size: 20px">{{ address.province }}</el-link>
                        <el-divider direction="vertical"></el-divider>
                        <el-link :underline="false" style="font-size: 20px">{{ address.city }}</el-link>
                        <el-divider direction="vertical"></el-divider>
                        <el-link :underline="false" style="font-size: 20px">{{ address.region }}</el-link>
                    </el-descriptions-item>
                    <el-descriptions-item label="详细地址" >
                        <el-link :underline="false" style="font-size: 20px">{{ address.detailAddress }}</el-link>
                    </el-descriptions-item>
                    <el-descriptions-item label="备注">
                        <el-link :underline="false" style="font-size: 20px">{{ address.describe ? address.describe : '暂无' }}</el-link>
                    </el-descriptions-item>
                </el-descriptions>
            </div>

        </el-card>

        <!--结算-->
        <el-card class="box-card " shadow="hover" style="margin: 20px 0">
            <div class="settlement">
                <div>
                    <el-link :underline="false">
                        已选择了
                        <span style="font-size: 20px;color: chocolate">{{ totalCount }}</span>
                        件商品</el-link>
                </div>

                <div>
                    <el-link :underline="false" style="margin-right: 30px">
                        合计
                        <span style="font-size: 20px;color: chocolate">{{ totalPrice }}</span>
                        元
                    </el-link>
                    <el-button type="primary" v-if="order.orderState === 0" @click="pay" plain>去支付<i class="el-icon-shopping-bag-1"></i></el-button>
                </div>
            </div>
        </el-card>

    </div>

</template>

<script>
    import { getOrderDetailInfoReq, payReq, getDefaultAddressReq } from "@/api/order";
    import settings from '@/settings'
    import { MessageBox } from "element-ui";
    import CountDown from "@components/order/CountDown";

    export default {
        name: "orderDetail",
        components: { CountDown },
        data() {
            return {
                prefix : settings.prefix || 'https://mall-resource-bucket.oss-cn-hangzhou.aliyuncs.com',// 全局前缀
                orderId: '',// orderId
                orderCartVoList: [],// 订单商品信息
                address: {},// 订单地址
                order: {},// 订单
                countDownShow: false,
            }
        },
        methods: {
            toOrder(){
                this.$router.push(`/order`)
            },
            pay(){// 支付订单
                console.log(this.address.addressId)
                payReq({orderId: this.orderId, addressId: this.address.addressId}).then(response => {
                    console.log(response)
                    if (response.state === true) {
                        document.querySelector('body').innerHTML = response.data.body;//查找到当前页面的body，将后台返回的form替换掉他的内容
                        this.$notify.success({title: '成功',message: response.message, duration: 1500});
                        //进行表单提交 跳转
                        document.forms[0].submit();
                    }else{
                        this.$notify.warning({title: '失败',message: response.message, duration: 1500});
                    }
                })
            },
            getDefaultAddress(){// 订单页面获得用户默认地址，如果没有需要添加
                getDefaultAddressReq().then(response => {
                    console.log(response)
                    if (response.state === true) {
                        this.address = response.data.address
                        console.log(this.address.addressId)
                        //this.$notify.success({title: '成功',message: response.message, duration: 1500});
                    }else{
                        //this.$notify.warning({title: '失败',message: response.message, duration: 1500});
                        MessageBox.confirm(response.message, '错误', {
                            cancelButtonText: '取消',
                            confirmButtonText: '添加地址',
                            type: 'warning'
                        }).then(() => {
                            this.$router.push("/home/address")
                        })
                    }
                })
            },
            getOrderInfo(){// 通过 订单id 获得订单信息
                getOrderDetailInfoReq({orderId: this.orderId}).then(response => {
                    console.log(response)
                    if (response.state === true) {
                        if (response.data.order === null){

                        }
                        this.order = response.data.order
                        this.orderCartVoList = response.data.orderCartVoList//保存产品信息
                        if (this.order.orderState === 0){
                            this.countDownShow = true
                        }
                        /*this.$notify.success({title: '成功',message: response.message, duration: 1500});*/
                    }else{
                        this.$notify.warning({title: '失败',message: response.message, duration: 1500});
                    }
                })
            },
            eventBlur(event){
                if(event.nodeName === 'SPAN' || event.nodeName === 'I')event = event.parentNode;event.blur();
            },
        },
        computed: {
            totalCount(){
                return this.orderCartVoList.length
            },
            totalPrice(){
                let sum = 0;
                this.orderCartVoList.forEach((item)=>{
                    sum += (item.price * item.total)
                })
                return sum;
            }
        },
        filters: {
            parseSpecs(specs){// 解析规格
                let specsObj = JSON.parse(specs);
                let str = "";
                Object.keys(specsObj).forEach((key)=>{
                    //console.log(specsObj[key])
                    str += specsObj[key] + " "
                })
                return str
            },
            tagToValue(tag){
                switch (tag) {
                    case 1 : return "家"
                    case 2 : return "学校"
                    case 3 : return "公司"
                    case 4 : return "其他"
                    default : return "其他"
                }
            }
        },
        beforeMount(){
            this.orderId = this.$route.params.orderId
            this.getOrderInfo()// 订单信息
            this.getDefaultAddress()// 地址信息
        },
        mounted(){
        },
    }
</script>

<style scoped>
    .shopping-cart-wrap{
        width: 70vw;
        margin: 0 auto;
    }
    >>>.el-input__inner{
        text-align: center;
    }

    >>>.label-center{
        text-align: center;
    }
    >>>.row-class{
        height: 60px;
        font-size: 20px;
    }

    .settlement{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
    }

</style>
